<template>
	<mt-tabbar v-model="selected" fixed>
	  <mt-tab-item id="0">
		  <span class="ss iconfont icon-addpeople" v-if="selected!=0"></span>
		    <span  class="ss iconfont icon-addpeople_fill"  v-else></span>
		  <br>
	   
	    预订
	  </mt-tab-item>
	  <mt-tab-item id="1">
		  <span class="iconfont icon-addressbook" v-if="selected!=1"></span>
		    <span class="iconfont icon-addressbook_fill"  v-else></span>
		  <br>
	    
	    排行
	  </mt-tab-item>
	  
		  
	  	<mt-tab-item id="2">
			<!-- 如果是点击别的，颜色是灰色 -->
				  <!-- 如果是点击了社区，图片就出现 -->
					<span v-if="selected!=2" class="iconfont icon-barrage"></span>
					<span  v-else><img src="./img/community011.png" alt="" @click="ogo"></span>
	  			  <br>
				  <span v-if="selected!=2">社区</span>
	  	  
	  	
	  	</mt-tab-item>


	  <mt-tab-item id="3">
		  <span class="iconfont icon-brush" v-if="selected!=3"></span>
		    <span class="iconfont icon-brush_fill"  v-else></span>
		  <br>
	    发现
	  </mt-tab-item>
	  <mt-tab-item id="4">
		  <span class="iconfont icon-businesscard" v-if="selected!=4"></span>
		    <span class="iconfont icon-businesscard_fill"  v-else></span>
		  <br>
	    我的
	  </mt-tab-item>
	</mt-tabbar>
</template>

<script>
import '@/assets/font/iconfont.css'
export default {
  name: 'App',
  data () {
    return {
      selected: 0
    }
  },
  methods:{
	  ogo(){
		  this.$router.push('/two/fabiao')
	  }
  },
  watch: {
    selected: function (val, oldVal) {
      switch (val) {
        case '0':
          this.$router.push('/home')
          break
        case '1':
          this.$router.push('/one')
          break
        case '2':
          this.$router.push('/two')
          break
        case '3':
          this.$router.push('/three')
          break
        case '4':
          this.$router.push('/four')
          break
      }
    }

  }

}
</script>

<style>
	.colorONe{
		background-color: orange;
	}

  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
	

  }
  body{
    margin:0;
    padding: 0;
  }
  ul li {
    list-style: none;
  }
  .mint-tabbar > .mint-tab-item.is-selected{
    color: deeppink;
    background: #fff;
  }
  .mint-tabbar{
    border:0;
    background: #fff;
    border-color: #fff;
  }
</style>
